<!--
 * @Author: yuanjunyi
 * @Date: 2024-04-19 15:56:03
 * @LastEditors: yuanjunyi
 * @LastEditTime: 2024-04-19 17:12:51
 * @Description: this is description
-->
<template>
  <div class="typical-box">
    <img :src="`${imgUrl}erp-dx.png`" alt="" class="img-center" />
    <div class="typical typical1">
      <div>30年行业管理经验标准化<br />10年系统管理实践方法论成果化</div>
      <img :src="`${imgUrl}erp-dx1.png`" alt="" />
      <p>融入管理理念及方法论</p>
    </div>
    <div class="typical typical2">
      <div>
        实时决策系统经营画布，动态指南<br />
        智能指引模块主流程规划动态指南一体化
      </div>
      <img :src="`${imgUrl}erp-dx2.png`" alt="" />
      <p>管理驾驶舱 智慧辅助决策模型</p>
    </div>
    <div class="typical typical3">
      <div>
        业财绩一体化设计理念<br />
        数据驱动业务，业务驱动财务<br />
        绩效驱动系统落地 绩效文化驱动管理升级
      </div>
      <img :src="`${imgUrl}erp-dx3.png`" alt="" />
      <p>业财绩一体化设计</p>
    </div>
    <div class="typical typical4">
      <div>
        流程管理，内置流程评审模型 <br />自动关联预算等相关业务数据
        <br />智能科学决策建议、意见一键触达管理层
      </div>
      <img :src="`${imgUrl}erp-dx4.png`" alt="" />
      <p>目标计划绩效一体化</p>
    </div>
    <div class="typical typical5">
      <img :src="`${imgUrl}erp-dx5.png`" alt="" />
      <p>领域驱动设计</p>
      <div>
        适用于复杂业务、多变需求场景客户需求<br />
        灵活配置系统拓展性强，产品升级成本低，分布式高可用技术保障平台稳定
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { imgUrl } from "@/utils/common";
</script>
<style lang="scss" scoped>
.typical-box {
  margin: auto;
  width: 66.7%;
  height: 659px;
  display: block;
  position: relative;
  .img-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
  }
  .typical {
    position: absolute;
    > div {
      position: absolute;
      font-weight: 400;
      font-size: 14px;
      display: block;
      color: #7a869a;
      line-height: 23px;
    }
    > p {
      font-weight: 600;
      font-size: 20px;
      color: #1678ff;
      line-height: 24px;
      position: absolute;
    }
  }
  .typical1 {
    left: 7%;
    top: 13%;
    > div {
      top: 44px;
      left: 48px;
      text-align: right;
    }
    > p {
      bottom: 5px;
      left: 48px;
    }
  }
  .typical2 {
    top: 13%;
    right: 6%;

    > div {
      right: 5px;
      top: 44px;
      text-align: left;
    }
    > p {
      bottom: 5px;
      right: -7px;
    }
  }
  .typical3 {
    left: 7%;
    top: 50%;

    > div {
      top: 26px;
      left: -11px;
      text-align: right;
    }
    > p {
      bottom: 5px;
      left: 84px;
    }
  }
}
.typical4 {
  top: 50%;
  right: 6%;

  > div {
    right: 5px;
    top: 20px;
    text-align: left;
  }
  > p {
    bottom: 5px;
    right: 77px;
  }
}
.typical5 {
  width: 466px;
  bottom: 15%;
  left: calc(50% - 233px);
  > div {
    top: 153px;
    /* left: calc(50% - 62px); */
  }
  > p {
    top: 122px;
    left: calc(50% - 62px);
  }
}
</style>
